<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	<title>榜单list</title>
	<link rel="stylesheet" href="css/list榜单.css">
</head>

<body>
	<div class="list-all">
		<!-- 1 title img -->
		<div class="list-top-img">
			<img src="./img/list-title-img.png" alt="">
		</div>
		<!-- 2 neirong -->
		<div class="list-centent">
			<!-- 2.1 -->
			<div>
				<img src="./img/TOP1.png" alt="">
				<div>
					<div>
						<img src="./img/list-centent-img1.jpg" alt="">
					</div>
					<div>
						<p>【江珊、郑云龙、郎玲主演】话剧《德龄与慈禧》</p>
						<p>
							话剧歌剧
						</p>
						<p>
							180-980<span>元</span>
						</p>
					</div>
				</div>
				<div></div>
				<div></div>
				<div>
					<div>
						<img src="./img/list-title1.png" alt="">
						<img src="./img/list-title2.png" alt="">
						<img src="./img/list-title3.png" alt="">
						<span>3259人想看</span>
					</div>
					<div>
						去看看
					</div>
				</div>
			</div>
			<!-- 2.2 -->
			<div>
				<img src="./img/TOP2.png" alt="">
				<div>
					<div>
						<img src="./img/list-centent-img2.jpg" alt="">
					</div>
					<div>
						<p>《三里屯脱口秀》大笑喜剧周末开心吐槽爆笑解压专场</p>
						<p>
							戏曲艺术
						</p>
						<p>
							100-200<span>元</span>
						</p>
					</div>
				</div>
				<div></div>
				<div></div>
				<div>
					<div>
						<img src="./img/list-title1.png" alt="">
						<img src="./img/list-title3.png" alt="">
						<img src="./img/list-title2.png" alt="">
						<span>3259人想看</span>
					</div>
					<div>
						去看看
					</div>
				</div>
			</div>
			<!-- 2.3 -->
			<div>
				<img src="./img/TOP3.png" alt="">
				<div>
					<div>
						<img src="./img/list-centent-img3.jpg" alt="">
					</div>
					<div>
						<p>【折扣特惠 真迹展】遇见古埃及 黄金木乃伊</p>
						<p>
							休闲展览
						</p>
						<p>
							118-220<span>元</span>
						</p>
					</div>
				</div>
				<div></div>
				<div></div>
				<div>
					<div>
						<img src="./img/list-title1.png" alt="">
						<img src="./img/list-title2.png" alt="">
						<img src="./img/list-title3.png" alt="">
						<span>3259人想看</span>
					</div>
					<div>
						去看看
					</div>
				</div>
			</div>
			<!-- 2.4 -->
			<div>
				<img src="" alt="">
				<div>
					<div>
						<img src="./img/list-centent-img4.jpg" alt="">
					</div>
					<div>
						<p>「华北首展」国家地理经典影像大展</p>
						<p>
							休闲展览
						</p>
						<p>
							180-980<span>元</span>
						</p>
					</div>
				</div>
				<div></div>
				<div>
					<div>
						<div>
							<img src="./img/list-centent-img4-1.jpg" alt="">
						</div>
						<div>
							<div>
								<img src="./img/list-centent-img4-2.jpg" alt="">
							</div>
							<div>
								<img src="./img/list-centent-img4-3.jpg" alt="">
							</div>
						</div>
					</div>
				</div>
				<div>
					<div>
						<img src="./img/list-title1.png" alt="">
						<img src="./img/list-title2.png" alt="">
						<img src="./img/list-title3.png" alt="">
						<span>3259人想看</span>
					</div>
					<div>
						去看看
					</div>
				</div>
			</div>
			<!-- 2.5 -->
			<div>
				<img src="" alt="">
				<div>
					<div>
						<img src="./img/list-centent-img6.jpg" alt="">
					</div>
					<div>
						<p>【嘻哈包袱铺】相声专场演出-五棵松剧场</p>
						<p>
							戏曲艺术
						</p>
						<p>
							118-220<span>元</span>
						</p>
					</div>
				</div>
				<div>
					<div>
						<div>
							<p>
								<span>推荐理由:</span>
								<span>北京嘻哈包袱铺</span>
							</p>
						</div>
					</div>
				</div>
				<div></div>
				<div>
					<div>
						<img src="./img/list-title1.png" alt="">
						<img src="./img/list-title2.png" alt="">
						<img src="./img/list-title3.png" alt="">
						<span>3259人想看</span>
					</div>
					<div>
						去看看
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

<script>
	// 在iphone6 375宽度中  html是以16px作为基本单位
	(function () {
		function w() {
			var all = document.documentElement;  // 获取html元素
			var test = all.getBoundingClientRect().width;  // 获取当前设备的宽度、
			console.log(123, test)
			if (test > 750) {
				test = 750;
			}
			rem = test / 23.4375;
			console.log(rem)
			all.style.fontSize = rem + 'px'
		}
		w();
		window.addEventListener("resize", function () {
			w()
		}, false)
	})();
</script>

</html>